<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- // 历史模式的路由demo -->
    <ul>
        <li><a href="/home">首页</a></li>
        <li><a href="/about">关于</a></li>
    </ul>
    <!--  当url变更后，展示对应的代码片段 -->
    <div class="root">
    </div>


    <script>
        const routes = [
            {
                path: '/',
                component: () => {
                    return ''
                }
            },
            {
                path: '/home',
                component: () => {
                    return '<h1>首页</h1>'
                }
            },
            {
                path: '/about',
                component: () => {
                    return '<h1>关于</h1>'
                }
            }
        ]
        let root = document.querySelector('.root');
        window.addEventListener("DOMContentLoaded", () => {
            onLoad();
        })
        // 监听浏览器的前进、后退事件
        window.addEventListener('popstate', function () {
            renderComponent(location.pathname);
        })
        function onLoad() {
            let linkList = document.querySelectorAll('a[href]');
            linkList.forEach(el => {
                el.addEventListener('click', (e) => {
                    // 1. 阻止默认事件,a标签的默认事件是跳转
                    e.preventDefault();
                    // 2. 获取href属性
                    let href = el.getAttribute('href');
                    // 3. 调用pushState方法，这个行为进入浏览器的缓存栈中，但是不会受到popstate事件的影响
                    history.pushState(null, href, href);
                    // 渲染组件
                    renderComponent(href);
                })
            })
        }
        function renderComponent(url) {
            // 1. 遍历路由表
            for (const route of routes) {
                if (route.path === url) {
                    // 4. 找到匹配的路由，调用组件函数
                    const component = route.component();
                    // 5. 展示组件
                    root.innerHTML = component;
                }
            }
        }
    </script>
</body>

</html>